<template>
	<view class="task-progress-wrap">
		<uv-navbar title="任务进度" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" rightIconColor="#313C56" :autoBack='true'
			titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class="task-progress-header">
			<view class="title">
				选定合作对象中
			</view>
			<view class="tip">
				请从报名人员中选择合作对象
			</view>
		</view>
		<view class="scroll-wrap">
			<view class="scroll-box-content">
				<uv-tabs :list="tabList" lineColor="#EB7520" activeStyle="font-size: 16px;color: #313C56;"
					inactiveStyle="font-size: 14px;color: #95A4B3;" @click="tabsTap"></uv-tabs>
				<scroll-view class="scroll" :scroll-y="true">
					<placeholder v-if="list == 0" style="height: 220px;"></placeholder>
					<uv-radio-group v-else size="16" v-model="radiovalue" class="list-wrap" placement="column" @change="check">
						<uv-radio class="item flex-row flex-between flex-items-center" v-for="(item,index) in list"
							:key="index" :label="item.digitalId" :name="item.digitalId">
							<view class="item-content item-content__company" v-if="[1,2].includes(item.digitalType)">
								<view class="head flex-row flex-between flex-items-center">
									<view class="name" style="color: #EB7520" @click="teamDetails(item.detail)">
										{{item.name}} ></view>
									<image class="grade" src="../../static/level.png" mode=""></image>
								</view>
								<view class="introduce uv-line-2">{{item.introduce}}</view>
							</view>
							<view class="item-content item-content__person" v-if="item.digitalType == 3">
								<view class="info flex-row flex-between flex-items-center">
									<image class="avatar" :src="item.head" mode=""></image>
									<view class="right">
										<view class="head flex-row flex-between flex-items-center">
											<view class="name" style="color: #EB7520"
												@click="memberDetails(item.detail)">{{item.name}} ></view>
											<image class="grade" src="../../static/level.png" mode=""></image>
										</view>
										<view class="tag-list flex-row flex-items-center" v-if="item.tagList">
											<view class="tag" v-for="(item,index) in item.tagList" :key="index">
												{{item}}
											</view>
										</view>
									</view>
								</view>
								<view class="introduce uv-line-2">{{item.introduce}}</view>
							</view>
						</uv-radio>
					</uv-radio-group>
				</scroll-view>

			</view>
		</view>
		<view class="task-progress-toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="flex-row flex-between flex-items-center" style="width:100%;height: 68px; ">
				<view class="task-progress-toolbar__share flex-row-center" @click="share">
					分享
				</view>
				<view :class="`task-progress-toolbar__confirm flex-row-center ${radiovalue && 'active'}`"
					@click="getApplicationPass()">
					确认人选
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getApplication,
		getApplicationPass
	} from "../../api";
	export default {
		data() {
			return {
				project: 0,
				type: 0,
				tabList: [{
					name: '全部',
					type: 0
				}, {
					name: '公司',
					type: 1
				}, {
					name: '团队',
					type: 2
				}, {
					name: '个人',
					type: 3
				}],
				radiovalue: 0,
				list: [],
			}
		},
		onLoad(info) {
			this.project = info.id
		},
		mounted() {
			this.getApplication()
		},
		methods: {
			getApplication() {
				let params = {
					page: 1,
					limit: 10,
					id: this.project,
					type: this.type
				}
				getApplication(params).then((data) => {
					this.list = data.list
					console.error(this.list)
				}).catch((e) => {})
			},

			getApplicationPass() {
				console.error(this.radiovalue)
				let params = {
					id: this.project,
					digitalId: this.radiovalue
				}
				getApplicationPass(params).then((data) => {
					this.$refs.toast.show({
						msg: '确认成功!',
            isSuccees: true
					})
					uni.navigateTo({
						url: '/pages/task-posted/task-posted'
					}, 2000)
				}).catch((e) => {})
			},
			/**
			 * 用户详情跳转
			 */
			memberDetails(id) {
				uni.navigateTo({
					url: '/pages/person-detail/person-detail?userId=' + id + "&sys=0"
				})
			},

			/**
			 * 公司详情跳转
			 */
			teamDetails(id) {
				uni.navigateTo({
					url: `/pages/company-detail/company-detail?id=${id}&sys=0`
				})
			},

			check(val) {
				this.radiovalue = val
			},

			share() {
				this.$refs.toast.show({msg: '链接已复制!'})
				return
			},
			/**
			 * tabs点击事件
			 */
			tabsTap(item) {
				this.type = item.type
				this.getApplication()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-progress-wrap {
		background: url(/static/progress-bg.png) top left;
		background-size: 100% 400px;
		background-repeat: no-repeat;
		display: flex;
		height: 100vh;
		width: 100vw;
		flex-direction: column;
		background-color: #F4F7FD;
		overflow: hidden;

		.task-progress-header {
			margin: 12px;

			.title {
				font-size: 18px;
				color: #313C56;
			}

			.tip {
				margin-top: 4px;
				font-size: 12px;
				color: #6B7885;
			}
		}

		.scroll-wrap {
			height: calc(100vh - 178px);
			padding: 0 12px 16px;
			box-sizing: border-box;

			.scroll-box-content {
				height: 100%;
				border-radius: 12px;
				background: #fff;
			}

			.scroll {
				height: calc(100% - 44px);
				width: 100%;

				.list-wrap {
					padding: 12px 16px;

					.item {
						padding-bottom: 12px;

						::v-deep .uv-radio__label-wrap {
							height: auto !important;
						}

						.item-content {
							flex: 1;
							margin-left: 12px;
							background-color: #F7F9FD;
							padding: 12px 16px;
							border-radius: 12px;

							&.item-content__company {
								height: 82px !important;
							}

							&.item-content-person {
								height: 112px !important;
							}


							.head {

								.name {
									font-size: 14px;
									color: #313C56;
								}

								.grade {
									width: 18px;
									height: 18px;
								}

							}

							.avatar {
								width: 40px;
								height: 40px;
								border-radius: 100%;
							}

							.right {
								flex: 1;
								margin-left: 12px;
							}

							.info {
								margin-bottom: 12px;
							}

							.tag-list {
								margin-top: 4px;

								.tag {
									padding: 2px 8px;
									background: #FFFFFF;
									border-radius: 80px 80px 80px 80px;
									font-size: 12px;
									color: #6B7885;
									margin-right: 16px;
								}
							}

							.introduce {
								margin-top: 4px;
								font-size: 12px;
								color: #6B7885;
							}
						}
					}
				}
			}
		}

		.task-progress-toolbar {
			height: 68px;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24px 24px 0px 0px;
			padding: 0 26px;
			box-sizing: border-box;
			font-size: 16px;

			.task-progress-toolbar__share {
				width: 72px;
				height: 44px;
				box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
				border-radius: 80px 80px 80px 80px;
				border: 1px solid #EB7520;
				color: #EB7520;
			}

			.task-progress-toolbar__confirm {
				width: 215px;
				height: 44px;
				background: #FBDED2;
				box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
				border-radius: 80px 80px 80px 80px;
				border: 1px solid #FBDED2;
				color: #fff;

				&.active {
					background: #EB7520;
				}
			}

		}
	}
</style>